<template>
  <div class="chat-input-wrapper">
    <div class="chat-input-container">
      <div class="input-wrapper">
        <textarea 
          class="chat-input" 
          v-model="message" 
          placeholder="输入消息..."
          @keydown.enter.prevent="onEnterPress"
          ref="inputField"
          rows="1"
          @input="autoResize"
        ></textarea>
        <div class="clear-btn" @click="clearMessage" v-if="message.trim()">
          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <line x1="18" y1="6" x2="6" y2="18"></line>
            <line x1="6" y1="6" x2="18" y2="18"></line>
          </svg>
        </div>
      </div>
      <button class="send-btn" @click="sendMessage" :disabled="isLoading || !message.trim()">
        <span class="send-icon">
          <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <line x1="22" y1="2" x2="11" y2="13"></line>
            <polygon points="22 2 15 22 11 13 2 9 22 2"></polygon>
          </svg>
        </span>
      </button>
    </div>
    
    <div class="footnote">
      <p>AI内容由AI生成，请仔细甄别</p>
      <p class="copyright">© {{ currentYear }} AI智能助手平台</p>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ChatInput',
  props: {
    isLoading: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      message: '',
      showEmojiPicker: false
    }
  },
  computed: {
    currentYear() {
      return new Date().getFullYear();
    },
    isDarkTheme() {
      // 检测父容器是否有暗色主题类
      if (this.$parent && this.$parent.$el) {
        const parentElement = this.$parent.$el;
        return parentElement.classList.contains('theme-dark');
      }
      return false;
    }
  },
  methods: {
    sendMessage() {
      if (!this.message.trim() || this.isLoading) return
      
      this.$emit('send', this.message.trim())
      this.message = ''
      this.$nextTick(() => {
        this.autoResize();
        this.$refs.inputField.focus()
      })
    },
    clearMessage() {
      this.message = ''
      this.$nextTick(() => {
        this.autoResize();
        this.$refs.inputField.focus()
      })
    },
    onEnterPress(e) {
      if (e.shiftKey) return; // 允许Shift+Enter换行
      this.sendMessage();
    },
    autoResize() {
      const textarea = this.$refs.inputField;
      textarea.style.height = 'auto';
      textarea.style.height = (textarea.scrollHeight < 120 ? textarea.scrollHeight : 120) + 'px';
    }
  },
  mounted() {
    this.autoResize();
    this.$refs.inputField.focus();
  }
}
</script>

<style scoped>
.chat-input-wrapper {
  display: flex;
  flex-direction: column;
  width: 100%;
  background-color: rgba(255, 255, 255, 0.8);
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.06);
  padding: 16px 20px;
  position: relative;
  z-index: 5;
  backdrop-filter: blur(10px);
}

.chat-input-container {
  display: flex;
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
}

.input-wrapper {
  flex: 1;
  position: relative;
  display: flex;
  align-items: center;
  background-color: #f5f7fa;
  border-radius: 16px;
  transition: all 0.3s;
  border: 1px solid rgba(0, 0, 0, 0.05);
  overflow: hidden;
}

.input-wrapper:focus-within {
  background-color: white;
  border-color: var(--primary-color, rgba(156, 39, 176, 0.3));
  box-shadow: 0 0 0 3px rgba(var(--primary-color, 156, 39, 176), 0.1);
}

.chat-input {
  flex: 1;
  min-height: 24px;
  max-height: 120px;
  border: none;
  background: transparent;
  border-radius: 16px;
  padding: 14px 16px;
  font-size: 15px;
  outline: none;
  color: #333;
  resize: none;
  line-height: 1.5;
  overflow-y: auto;
}

.clear-btn {
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  cursor: pointer;
  color: #777;
  transition: all 0.2s;
  margin-right: 4px;
}

.clear-btn:hover {
  background-color: rgba(0, 0, 0, 0.08);
  color: #333;
}

.send-btn {
  margin-left: 12px;
  width: 46px;
  height: 46px;
  background: linear-gradient(to right bottom, var(--primary-color, #9c27b0), var(--secondary-color, #673ab7));
  color: white;
  border: none;
  border-radius: 14px;
  cursor: pointer;
  transition: all 0.3s;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 3px 8px rgba(var(--primary-color, 156, 39, 176), 0.25);
}

.send-btn:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 5px 12px rgba(var(--primary-color, 156, 39, 176), 0.3);
}

.send-btn:disabled {
  background: #e0e0e0;
  color: #9e9e9e;
  box-shadow: none;
  cursor: not-allowed;
}

.send-icon {
  display: flex;
  align-items: center;
  justify-content: center;
}

.footnote {
  text-align: center;
  margin-top: 12px;
  font-size: 12px;
  color: #888;
  user-select: none;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}

.copyright {
  margin-top: 4px;
  font-size: 11px;
  color: #aaa;
}

/* 滚动条样式 */
.chat-input::-webkit-scrollbar {
  width: 4px;
}

.chat-input::-webkit-scrollbar-track {
  background: transparent;
}

.chat-input::-webkit-scrollbar-thumb {
  background: rgba(var(--primary-color, 156, 39, 176), 0.2);
  border-radius: 2px;
}

/* 深色主题适配 */
:deep(.theme-dark) .chat-input-wrapper {
  background-color: rgba(18, 18, 18, 0.8);
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.2);
}

:deep(.theme-dark) .input-wrapper {
  background-color: rgba(55, 55, 55, 0.9);
  border-color: rgba(255, 255, 255, 0.1);
}

:deep(.theme-dark) .input-wrapper:focus-within {
  background-color: rgba(66, 66, 66, 0.95);
  border-color: var(--primary-color, rgba(156, 39, 176, 0.5));
}

:deep(.theme-dark) .chat-input {
  color: rgba(255, 255, 255, 0.9);
}

:deep(.theme-dark) .chat-input::placeholder {
  color: rgba(255, 255, 255, 0.5);
}

:deep(.theme-dark) .clear-btn {
  color: #aaa;
}

:deep(.theme-dark) .clear-btn:hover {
  background-color: rgba(255, 255, 255, 0.1);
  color: #eee;
}

:deep(.theme-dark) .footnote,
:deep(.theme-dark) .copyright {
  color: #777;
}

/* 响应式样式 */
@media (max-width: 767px) {
  .chat-input-wrapper {
    padding: 12px 16px;
  }
  
  .chat-input {
    padding: 12px 14px;
    font-size: 14px;
  }
  
  .send-btn {
    width: 42px;
    height: 42px;
    border-radius: 12px;
  }
  
  .clear-btn {
    width: 36px;
    height: 36px;
  }
}
</style> 